import React, { useEffect, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { NavBar } from 'antd-mobile'
import { Card, Modal, Form, Input, message } from 'antd';
import './address.less'
import axios from '../../utils/Index'
export default function Address() {
    const Navigate = useNavigate()
    const [addrList, setAddrList] = useState([])
    useEffect(() => { getAddrList() }, [])
    const getAddrList = async () => {
        const { data } = await axios.get('/lmy/addr_list')
        // console.log(data);
        setAddrList(data.addrList)
    }
    const getCopy = (text) => {
        console.log(text.addr_name + text.phone + text.addr);
        const info = text.addr_name + text.phone + text.addr
        navigator.clipboard.writeText(info)
            .then(() => {
                message.success('已复制到粘贴板');
                console.log('复制成功');
            })
            .catch((err) => {
                console.log('复制失败，原因是：', err);
            })
    }

    const delAddr = async (id) => {
        await axios.delete('/lmy/deladdr?_id=' + id)
        getAddrList()
    }
    return (
        <div>
            <div className="addr_head">
                <NavBar onBack={() => { Navigate('/My') }}>收货地址</NavBar>
            </div>
            <div className="addr_main">
                {
                    addrList.map((item, index) => {
                        return <Card className="addr_item" key={index}>
                            <p>

                                <span>{item.addr_name}</span><i>&nbsp; </i>
                                <span>{item.phone}</span><i>&nbsp; </i>
                                <span onClick={() => {
                                    delAddr(item._id)
                                }} 
                                style={{
                                    
                                    float:'right',
                                    fontSize:'20px',
                                    marginTop:'-10px',
                                }}
                                >X</span>
                            </p><br />
                            <p>{item.addr}</p><br />
                            <p className='box'>
                                <span>
                                    <input type="radio" /><span>设为默认</span>
                                </span>
                                <span className='span'>
                                    <span onClick={() => { getCopy(item) }}>复制</span>
                                    <span>修改</span>
                                </span>

                            </p>
                        </Card>
                    })
                }
            </div>
        </div>
    )
}
